<template>
	<div class="stepTopBorder">
		<!-- 回放标题头 -->
		<el-row
			v-if="topInfo.stepName"
			class="stepTopTitle contentPadding"
			@click.native="showHideBrand(topInfo.stepShowIndex)"
		>
			<el-col :span="4" class="flexCenterLeft topColHeight">
				<template v-if="isShowStepIcon">
					<i
						class="text-white-color topIconSpan"
						:class="stepShow.iconUpDown"
						:ref="'icon' + topInfo.stepShowIndex"
					></i>
				</template>

				<span class="text-white-color">
					{{ topInfo.stepName }}
				</span>
			</el-col>
			<template v-if="topInfo.stepShowIndex !== 'squidRecord'">
				<el-col
					:span="7"
					class="flexCenterStart topCardImgCol topColHeight"
				>
					<template v-if="isShowPublicCards">
						<div
							class="topCardImgContent"
							v-for="(publicCardImg,
							index) in topInfo.publicCardsImg"
							:key="index + Math.random()"
							:class="index > 2 ? 'ml5' : ''"
						>
							<div
								v-if="publicCardImg.isShowCardMark"
								class="cardMarkStyle"
							>
								<el-image
									:src="cardMarkImg"
									fit="contain"
								></el-image>
							</div>
							<el-image
								:src="publicCardImg.src"
								fit="contain"
							></el-image>
						</div>
					</template>
					<template v-else>
						<div class="topCardImgContent cardBorderDashed" />
						<div class="topCardImgContent cardBorderDashed ml5" />
					</template>
				</el-col>
				<el-col :span="4" class="flexCenterStart topColHeight">
					<template v-if="isShowJoinCount">
						<i
							class="el-icon-user-solid iconColor topIconSpan userIcon"
						></i>
						<span class="topJoinCountSpan text-white-color">
							{{ topInfo.joinCount }}
						</span>
					</template>
				</el-col>
				<el-col :span="9" class="flexCenterLeft">
					<div class="flexCenterStart topPoolImgDiv topColHeight">
						<div class="topPoolImgContent">
							<el-image
								:src="totalPoolImg"
								fit="contain"
							></el-image>
						</div>
						<span class="text-white-color">
							{{ handleNumberFormat(topInfo.potAmount) }}
						</span>
					</div>
				</el-col>
			</template>
		</el-row>
		<!-- 回放列表(牌谱，ShowDown用) -->
		<ul
			v-if="!topInfo.stepItemMiddle && bottomList.length > 0"
			class="stepBottomList"
			:ref="topInfo.stepShowIndex"
			:class="stepShow.showHideContent"
		>
			<li class="stepBottomItem contentPadding">
				<el-row class="detailRow">
					<el-col :span="11" :offset="13" class="text-white-color">
						<el-row>
							<el-col :span="7">
								<div>
									{{ $t('总盈亏') }}
								</div>
							</el-col>
							<el-col :span="7">
								<div>
									{{ $t('打牌盈亏') }}
								</div>
							</el-col>
							<el-col :span="7">
								<div>
									{{ $t('保险盈亏') }}
								</div>
							</el-col>
							<el-col
								:span="3"
								v-if="isShowSquidNumber(topInfo.squidMode)"
							>
								<div>
									{{ $t('鱿鱼数') }}
								</div>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</li>
			<li
				class="stepBottomItem contentPadding bb1"
				v-for="(item, index) in bottomList"
				:key="index + Math.random()"
			>
				<el-row class="detailRow" :class="item.fontGrayStyle">
					<el-col :span="3" class="flexCenterLeft">
						<div class="seatPosImgContent">
							<div class="seatPosImgDiv">
								{{ item.seatCodeName }}
							</div>
							<div
								class="resultSpan"
								:class="
									(item.isSelf ? 'tcblue1' : 'tcyellow1') +
										getOpClass(item.resultInfo)
								"
							>
								{{
									item.resultInfo === 'Fold'
										? $t('弃牌')
										: item.resultInfo
								}}
							</div>
						</div>
					</el-col>
					<el-col :span="8" class="cardImgCol">
						<div>
							<div
								:class="
									(item.isSelf ? 'tcblue1' : 'tcwhite') +
										getOpClass(item.resultInfo)
								"
							>
								{{ item.nickName || '-' }}
							</div>
							<div class="flxR aiC jcSB cardImgDiv">
								<div class="flxR">
									<div
										class="cardImgContent"
										v-for="(handCardImg,
										index2) in item.handCardsImg"
										:key="index2 + Math.random()"
									>
										<!-- <div
											v-if="(handCardImg.isShowCardGray && !(item.resultInfo === '弃牌' || item.resultInfo === 'Fold')) ||
											((item.resultInfo === '弃牌' || item.resultInfo === 'Fold') && item.isShowCardEye)"
											class="cardGrayStyle"
										></div> -->
										<div
											v-if="
												handCardImg.isShowCardGray ||
													(item.resultInfo ===
														'弃牌' ||
														item.resultInfo ===
															'Fold')
											"
											class="cardGrayStyle"
										></div>
										<div
											v-if="item.isShowCardEye"
											class="cardEyeStyle"
										>
											<el-image
												:src="cardEyeImg"
												fit="contain"
											></el-image>
										</div>
										<div
											v-if="handCardImg.isShowCardMark"
											class="cardMarkStyle"
										>
											<el-image
												:src="cardMarkImg"
												fit="contain"
											></el-image>
										</div>
										<!-- <div v-if="(item.resultInfo === '弃牌' || item.resultInfo === 'Fold') && !item.isShowCardEye" class="bcred2 wfull hfull bbox cardBorder" /> -->
										<el-image
											:src="handCardImg.src"
											fit="contain"
										></el-image>
									</div>
								</div>
								<div class="flxR">
									<div
										class="cardImgContent"
										v-for="(publicCardImg,
										index1) in item.publicCardsImg"
										:key="index1 + Math.random()"
										:class="index1 > 2 ? 'ml5' : ''"
									>
										<div
											v-if="
												publicCardImg.isShowCardGray ||
													(item.resultInfo ===
														'弃牌' ||
														item.resultInfo ===
															'Fold')
											"
											class="cardGrayStyle"
										></div>
										<el-image
											:src="publicCardImg.src"
											fit="contain"
										></el-image>
									</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="11" :offset="2">
						<el-row>
							<el-col :span="7">
								<div
									:class="
										getNumberColorClass(
											item.totalNetAmount
										) + getOpClass(item.resultInfo)
									"
								>
									{{ item.totalNetAmount > 0 ? '+' : ''
									}}{{
										handleNumberFormat(item.totalNetAmount)
									}}
								</div>
							</el-col>
							<el-col
								:span="7"
								v-if="insurePoolDetail.isInsured === 1"
							>
								<div
									:class="
										getNumberColorClass(item.netAmount) +
											getOpClass(item.resultInfo)
									"
								>
									{{ item.netAmount > 0 ? '+' : ''
									}}{{ handleNumberFormat(item.netAmount) }}
								</div>
							</el-col>
							<el-col
								:span="7"
								v-if="insurePoolDetail.isInsured === 1"
							>
								<div
									:class="
										getNumberColorClass(
											item.insuredNetAmount
										) + getOpClass(item.resultInfo)
									"
								>
									{{ item.insuredNetAmount > 0 ? '+' : ''
									}}{{
										handleNumberFormat(
											item.insuredNetAmount
										)
									}}
								</div>
							</el-col>
							<el-col
								v-if="isShowSquidNumber(topInfo.squidMode)"
								:span="3"
								:offset="
									insurePoolDetail.isInsured === 1 ? 0 : 14
								"
							>
								<div
									:class="
										getNumberColorClass(item.squidNumber) +
											getOpClass(item.resultInfo)
									"
								>
									{{ item.squidNumber }}
								</div>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</li>
			<!-- 保险池展示 -->
			<li class="stepBottomItem contentPadding" :key="Math.random()">
				<el-row class="detailRow">
					<el-col :span="5" class="flexCenterLeft">
						<span class="resultSpan">
							<el-image
								:src="insurePoolDetail.src"
								fit="contain"
								class="text-align-middle"
							></el-image>
							<span class="text-align-middle text-insured-color">
								{{ insurePoolDetail.title }}
							</span>
						</span>
					</el-col>
					<el-col :span="11" :offset="8">
						<el-row>
							<el-col :span="10" :offset="14">
								<span
									:class="
										getNumberColorClass(
											insurePoolDetail.insuredPool
										)
									"
								>
									{{
										insurePoolDetail.insuredPool > 0
											? '+'
											: ''
									}}{{
										handleNumberFormat(
											insurePoolDetail.insuredPool
										)
									}}
								</span>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</li>
		</ul>

		<!-- 回放列表(Pre,Flop,Turn,River用) -->
		<ul
			v-if="topInfo.stepItemMiddle"
			class="stepBottomList"
			:ref="topInfo.stepShowIndex"
			:class="stepShow.showHideContent"
		>
			<li
				class="stepBottomItem contentPadding"
				:class="{ tcyellow1: item.isSelf, tcwhite: !item.isSelf }"
				v-for="(item, index) in bottomList"
				:key="index + Math.random()"
			>
				<el-row class="detailRow" :class="item.fontGrayStyle">
					<el-col
						:span="3"
						class="flexCenterLeft"
						:class="item.betAction === 'F' ? 'op50' : ''"
					>
						<div class="seatPosImgDiv">
							{{ item.seatCodeName }}
						</div>
					</el-col>
					<el-col :span="8" class="cardImgCol">
						<div>
							<div class="tcwhite">
								{{ item.nickName || '-' }}
							</div>
							<div class="flxR aiC jcSB cardImgDiv">
								<div class="flxR">
									<div
										class="cardImgContent"
										v-for="(handCardImg,
										index2) in item.handCardsImg"
										:key="index2 + Math.random()"
									>
										<el-image
											:src="handCardImg.src"
											fit="contain"
										></el-image>
									</div>
								</div>
							</div>
						</div>
					</el-col>
					<template v-if="item.isWinSquidRecord">
						<el-col :span="4" class="flexCenterStart">
							<div class="betOpImgSpan">
								<el-image
									:src="item.betOpImg"
									fit="contain"
								></el-image>
							</div>
							<span class="betAmountSpan">
								{{ 'x' + item.squidNumber }}
							</span>
						</el-col>
					</template>
					<template v-else>
						<el-col
							:span="4"
							class="flexCenterStart"
							:class="item.betAction === 'F' ? 'op50' : ''"
						>
							<div
								v-if="item.isPlusBetAction"
								class="plusBetAction"
							>
								{{ item.betAction }}
							</div>
							<div
								v-else
								class="betOpImgSpan"
								:style="{
									backgroundColor: item.betActionColor
								}"
							>
								{{ item.betAction }}
							</div>
							<span class="betAmountSpan">
								{{ item.betActionInsureName }}
								{{
									item.betAction === 'F'
										? ''
										: handleNumberFormat(item.betAmount)
								}}
							</span>
						</el-col>
						<template v-if="!item.isEVInsured">
							<el-col
								:span="4"
								class="flexCenterleft rightValueCol"
							>
								<template v-if="!item.betActionInsureName">
									<span>P:</span>
									<span>
										{{
											handleNumberFormat(
												item.leijiPotAmount
											)
										}}
									</span>
								</template>
							</el-col>
							<el-col
								:span="4"
								class="flexCenterleft rightValueCol"
								:class="item.betAction === 'F' ? 'op50' : ''"
							>
								<template v-if="!item.betActionInsureName">
									<span>
										{{ handleNumberFormat(item.afterChip) }}
									</span>
								</template>
								<template v-else>
									<span>{{ item.insureType }}:</span>
									<span>
										{{
											handleNumberFormat(item.insurePool)
										}}
									</span>
								</template>
							</el-col>
						</template>
					</template>
				</el-row>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	name: 'ReplayStep',
	props: {
		showStatus: {
			type: Boolean,
			default: false
		},
		isShowStepIcon: {
			type: Boolean,
			default: true
		},
		isShowPublicCards: {
			type: Boolean,
			default: false
		},
		isShowJoinCount: {
			type: Boolean,
			default: false
		},
		topInfo: {
			type: Object,
			default: () => {
				return {
					stepName: undefined,
					stepShowIndex: undefined,
					stepItemMiddle: false,
					joinCount: undefined,
					potAmount: undefined,
					publicCardsImg: [],
					squidMode: false
				}
			}
		},
		bottomList: {
			type: Array,
			default: () => []
		},
		insurePoolDetail: {
			type: Object,
			default: () => {
				return {
					title: undefined,
					src: undefined,
					insuredPool: undefined
				}
			}
		}
	},
	data() {
		return {
			totalPoolImg: require('@/assets/images/game/mainPotBtn.png'),
			cardEyeImg: require('@/assets/images/game/invalidName.png'),
			cardMarkImg: require('@/assets/images/game/cardManipulateMark.png')
		}
	},
	computed: {
		// 折叠图标样式,牌谱默认展开，其他默认折叠
		stepShow() {
			if (this.topInfo.stepShowIndex === 'Detail') {
				return {
					iconUpDown: 'el-icon-arrow-up',
					showHideContent: ''
				}
			} else {
				return {
					iconUpDown: 'el-icon-arrow-up',
					showHideContent: ''
				}
				// return {
				// 	iconUpDown: 'el-icon-arrow-up',
				// 	showHideContent: 'hideContent'
				// }
			}
		}
	},
	methods: {
		isShowSquidNumber(squidMode = false) {
			return this.topInfo.stepShowIndex === 'Detail' && squidMode
		},
		getOpClass(resultInfo) {
			return resultInfo === '弃牌' || resultInfo === 'Fold' ? ' op50' : ''
		},
		getNumberColorClass(num) {
			return num > 0 ? 'tcgreen1' : 'tcred1'
		},
		handleNumberFormat(num) {
			return Number(num || 0).toLocaleString('en-us')
		},
		// 折叠隐藏步骤列表
		showHideBrand(stepShowIndex) {
			const isHide = this.$refs[stepShowIndex]
				.getAttribute('class')
				.includes('hideContent')
			if (isHide) {
				this.$refs['icon' + stepShowIndex].classList.remove(
					'el-icon-arrow-down'
				)
				this.$refs['icon' + stepShowIndex].classList.add(
					'el-icon-arrow-up'
				)
				this.$refs[stepShowIndex].classList.remove('hideContent')
			} else {
				this.$refs['icon' + stepShowIndex].classList.remove(
					'el-icon-arrow-up'
				)
				this.$refs['icon' + stepShowIndex].classList.add(
					'el-icon-arrow-down'
				)
				this.$refs[stepShowIndex].classList.add('hideContent')
			}
		}
	}
}
</script>
